<template>
  <van-swipe :autoplay="3000" class="banner" lazy-render>
    <van-swipe-item v-for="item in props.banners" :key="item.id" @click="detail(item.id)">
      <img v-lazy="item.img_url" alt=""/>
    </van-swipe-item>

  </van-swipe>
</template>

<script setup lang="ts">
import type {Slides} from "@/types/slides";
import {useRouter} from "vue-router";

const router = useRouter();
function detail(id?:number) {
  console.log(id);
  id && router.push({
    path:'/detail',
    query:{id},
  });
}

interface Props {
  banners: Slides.Dto[];
}

const props = withDefaults(defineProps<Props>(), {
  banners: () => []
});

</script>

<style lang="scss">
.banner {
  img {
    height: auto !important; /**高度自适应 */
    width: 100%;
  }
}
</style>